<template>
	<div class="activeMessage">
		<h3>Message 消息提示框</h3>
		<div class="message1">
			<h4>基础用法</h4>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-button :plain="true" @click="open">打开消息提示框</el-button>
				</el-col>
				<el-col :span="12">
					<el-button :plain="true" @click="openVn">VNode</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="message2">
			<h4>不同状态</h4>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-button :plain="true" @click="open2">成功</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open3">警告</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open4">消息</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open5">错误</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="message3">
			<h4>可关闭</h4>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-button :plain="true" @click="open6">成功</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open7">警告</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open8">消息</el-button>
				</el-col>
				<el-col :span="6">
					<el-button :plain="true" @click="open9">错误</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			open() {
				this.$message('这是一条消息提示');
			},
			openVn() {
				const h = this.$createElement;
				this.$message({
					message: h('p', null, [
						h('span', null, '内容可以是 '),
						h('i', {
							style: 'color: teal'
						}, 'VNode')
					])
				});
			},
			open2() {
				this.$message({
					message: '这是一条成功消息',
					type: 'success'
				});
			},
			open3() {
				this.$message({
					message: '警告，这是一条警告信息',
					type: 'warning'
				})
			},
			open4() {
				this.$message('这是一条消息提示')
			},
			open5() {
				this.$message({
					message: '这是一条错误信息提示',
					type: 'error'
				})
			},
			open6() {
				this.$message({
					message: '这是一条成功消息',
					type: 'success',
					showClose: true
				});
			},
			open7() {
				this.$message({
					message: '警告，这是一条警告信息',
					type: 'warning',
					showClose: true
				})
			},
			open8() {
				this.$message({
					message: '这是一条消息提示',
					showClose: true
				})

			},
			open9() {
				this.$message({
					message: '这是一条错误信息提示',
					type: 'error',
					showClose: true
				})
			}
		}
	}
</script>

<style>

</style>